<template>
	<view class="usdtwithdraw">
		<!-- 标题 -->
		<view class="withtitle">
			<view class="">YTB转账</view>
			<image class="title_btm" src="/static/images/personCenter/Accent.png" mode=""></image>
		</view>
		<!-- 表单 -->
		<view style="margin-top: 140rpx;">
			<view class="ipt_box">
				<u--input v-model="info.nums" style="height: 100%;font-size: 32rpx;" placeholder="输入转账数量"
					border="none"></u--input>
			</view>
			<view class="ipt_box">
				<u--input v-model="info.pay_pass	" type='password' style="height: 100%;font-size: 32rpx;" placeholder="输入交易密码"
					border="none"></u--input>
			</view>
			<view class="ipt_box">
				<u--input v-model="info.phone	" style="height: 100%;font-size: 34rpx;" placeholder="对方手机号"
					border="none"></u--input>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="withdraw_btn" @click="submit">
			立即转账
		</view>
		<!-- @click="successShow=true" -->
		<!-- 弹窗 -->
		<u-popup :show="successShow" :overlay='false' :round="10" mode="center">
			<view class="zhezhao">
				<image class="suc_icon" src="/static/images/personCenter/success.png" mode=""></image>
				<view class="fs-32" style="color: #fff;margin-top: 30rpx;">提现成功</view>
			</view>
		</u-popup>
		<u-popup :show="errorShow" :overlay='false' :round="10" mode="center">
			<view class="zhezhao">
				<view class="error_img">
					<image class="error_icon" src="/static/images/personCenter/error.png" mode=""></image>
				</view>
				<view class="fs-32" style="color: #fff;margin-top: 30rpx;">余额不足</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					nums:'',//数量
					pay_pass:'',//	支付密码
					phone:""//	手机号
				},
				value: '',
				successShow: false,
				errorShow:false

			};
		},
		methods:{
			async submit(){
				if(!this.info.nums){
						uni.$u.toast('请输入数量')
						return
				}
				if(!this.info.pay_pass){
						uni.$u.toast('请输入支付密码')
						return
				}
				if(!this.info.phone){
						uni.$u.toast('请输入手机号')
						return
				}
				let res = await this.$http.post('user/user_zhuan', {
					 ...this.info
				})		
				if(res.code==200){
					this.successShow=true
					setTimeout(()=>{
						this.successShow=false
					},500)
				}else{
					this.errorShow=true
					setTimeout(()=>{
						this.errorShow=false
					},500)
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #1E2240;
	}

	.usdtwithdraw {
		padding: 30rpx;

		.zhezhao {
			background: rgba(0, 0, 0, 0.3);
			width: 300rpx;
			height: 240rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.error_img{
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #fff;
				border-radius: 50%;
				.error_icon{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.suc_icon {
				width: 100rpx;
				height: 70rpx;
			}
		}

		.withdraw_btn {
			width: 660rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background: linear-gradient(266.84deg, #0014FF 0%, #801FF0 50%, #FF2CDF 100%);
			border-radius: 200rpx;
			position: fixed;
			bottom: 60rpx;
			left: 45rpx;
		}

		.ipt_box {
			background-color: #fff;
			border-radius: 20rpx;
			height: 110rpx;
			margin-bottom: 30rpx;
			padding-left: 30rpx;
		}

		.withtitle {
			color: #fff;
			font-size: 44rpx;

			.title_btm {
				width: 200rpx;
				height: 8rpx;
			}
		}
	}
</style>